<template>
	<!-- v-if="KeyboarHid" -->
	<view :class="['keyboardBox', 'bodMove', bodMove, { 'KeyboarBody bottomMove': isFixed }, { showDefineBtn: showConfirm }]">		
		<view class="dowmImgBx" v-if="topBarShow">
			<view class="dowmImg" @tap="close"></view>
			<view class="frish" @click="clickFinish">完成</view>
		</view>
		<view v-if="showConfirm&&showPoint" class="topKeyboarBx">
			<view v-for="(item, index) in keypointNum" :key="index" @tap="clickBoard(item.num,'point')" hover-class="hover" :hover-stay-time="20" class="keyboar topkey">{{ item.name }}</view>
		</view>
		<view class="KeyboarBx">
			<block v-if="showConfirm">
				<view class="flex-sub flex">
					<view class="flex-sub cfm_keyBx">
						<view v-for="(num, index) in keyboardNum" :key="index" @tap="clickBoard(num)" hover-class="hover" :hover-stay-time="20" class="keyboar">{{ num }}</view>
						<view class="flex zrbox">
							<view @tap="clickBoard('0')" hover-class="hover" :hover-stay-time="20" class="keyboar zrNum flex-sub">0</view>
							<view v-if="otherNum" @tap="clickBoard(otherNum)" :class="['keyboar', otherNum == '' ? 'empty' : '']" :hover-stay-time="20" hover-class="hover">{{ otherNum }}</view>
						</view>
					</view>
					<view class="mrightBox">
						<view @tap="deleteKeyboar()" class="keyboar keyboarflex " :hover-stay-time="20" hover-class="hover">
							<view v-if="clearBtn" class="text-xl text-c9">清空</view>
							<view v-else class="keyboarDel"></view>
						</view>
						<view class="keyboar fnishBtn" :class="{dep:iptNum.length>0}" @click="clickFinish" :hover-stay-time="20" hover-class="hover">
							确定
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view v-for="(num, index) in keyboardNum" :key="index" @tap="clickBoard(num)" hover-class="hover" :hover-stay-time="20" class="keyboar">{{ num }}</view>
				<view v-if="otherNum" @tap="clickBoard(otherNum)" :class="['keyboar', otherNum == '' ? 'empty' : '']" :hover-stay-time="20" hover-class="hover">{{ otherNum }}</view>
				<view @tap="clickBoard('0')" hover-class="hover" :hover-stay-time="20" class="keyboar">0</view>
				<view @tap="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time="20" hover-class="hover"><view class="keyboarDel"></view></view>
			</block>
			
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//限制输入框的长度 空值不限制
		psdLength: {
			type: [Number, String],
			default: ''
		},
		//键盘码
		keypointNum: {
			type: [Array, Object],
			default: () => {
				return [{name:'1/2',num:0.5},{name:'1/3',num:0.33},{name:'1/4',num:0.25},{name:'1/5',num:0.2}];
			}
		},
		//键盘码
		keyboardNum: {
			type: [Array, Object],
			default: () => {
				return [1, 2, 3, 4, 5, 6, 7, 8, 9];
			}
		},
		// unitList:{
		// 	type:Array,
		// 	default: () => {
		// 		return [];
		// 	}
		// },
		// curItem:{
		// 	type:Object,
		// 	default: () => {
		// 		return {};
		// 	}
		// },
		showPoint: {
			type: Boolean,
			default: false
		},
		clearBtn: {
			type: Boolean,
			default: false
		},
		isFixed: {
			type: Boolean,
			default: false
		},
		showConfirm: {
			type: Boolean,
			default: false
		},
		//是否显示上面工具条
		topBarShow: {
			type: Boolean,
			default: false
		},
		finishClose: {
			type: Boolean,
			default: false
		},
		//特殊键盘码 .或者X  默空
		otherNum: {
			type: String,
			default: ''
		},
		//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
		tabBar: {
			type: Boolean,
			default: false
		},
		value: {
			type: String,
			default: ''
		},
		keyValue: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
	},
	data() {
		return {
			bodMove: '',
			password: '', //要返回的结果
			iptNum: [], //输入的内容
			showValue:'',
			// KeyboarHid: false ,//键盘影藏和显示
			// 口服等用药方式
			muValue:'996',//996日常
			nUnitId:''
			// curnItem:{}
		};
	},
	watch: {
		// iptNum(newVal, oldVal) {
		// 	let cvalue = newVal.join('')
		// 	console.log('iptNum',newVal,oldVal)
		// 	// let ndata = cvalue
		// 	let ndata = cvalue
		// 	this.$emit('input', ndata);
		// 	// this.$emit('change', ndata);
			
		// },
		// keyValue(newVal, oldVal) {
		// 	// console.log('ffff',JSON.stringify(newVal))
		// 	console.log('iptvalue',newVal,oldVal)
		// 	this.iptNum = newVal.split('');
		// },
		// showValue(newVal, oldVal) {
		// 	// console.log('ffff',JSON.stringify(newVal))
		// 	console.log('iptvalue',newVal,oldVal)
		// 	this.iptNum = newVal.split('');
		// },
		// value(newVal, oldVal) {
		// 	this.iptNum = newVal.split('');
		// }
		// curItem(newVal){
		// 	this.curnItem = newVal||{}
		// 	console.log('curnItem',newVal)
		// }
	},
	created() {
		// this.curnItem = this.curItem
	},
	methods: {
		open() {
			// this.KeyboarHid = true;
			if (this.tabBar) {
				uni.hideTabBar();
			}
			// console.log('open',this.curItem)
			console.log('open+++',this.keyValue)
			// let nvalue = this.curItem.inputValue||'';
			// this.iptNum = nvalue.split('');
			this.$nextTick(() => {
				setTimeout(() => {
					this.bodMove = 'moveShow';
				}, 30);
			});
		},
		close() {
			if (this.tabBar) {
				uni.showTabBar();
			}
			this.bodMove = '';
			console.log('close')
			this.$emit('back')
			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		this.KeyboarHid = false;
			// 	}, 300);
			// });
		},
		// 密码框
		clickBoard(num,type) {
			// this.$onTabTouch()
			if (num == '') return;
			let iptNum = this.iptNum.filter(item => item != '');
			type==='point'&&this.reset();
			//判断是否限制长度
			if (this.psdLength != '') {
				if (iptNum.length >= this.psdLength) {
					return;
				}
				this.iptNum.push(num);
			} else {
				this.iptNum.push(num);
			}
			let result = this.iptNum.join('');
			this.$emit('inputings',result);
		},
		//点击完成
		clickFinish() {
			// this.$onTabTouch()
			this.$emit('finish');
			this.finishClose&&this.close();
		},
		// tapItem(key,id){
		// 	this[key] = id
		// 	let ndata = {val:this.showValue,nUnitId:this.nUnitId,stype:this.muValue,nUseType:this.seleTClass}
		// 	this.$emit('input', ndata);
		// },
		//重置 清空
		reset() {
			this.iptNum = [];
		},
		//删除
		deleteKeyboar() {
			// this.$onTabTouch()
			this.clearBtn?this.reset():this.iptNum.pop();
			this.$emit('inputings');
		}
	}
};
</script>

<style lang="scss" scoped>
//展示确定按钮	
.showDefineBtn{
	&.keyboardBox{
		background-color: #FAFAFA;
		padding: 0 12rpx;
	}
	.mrightBox{
		width: 168rpx;//168
		margin-left: 14rpx;
		.keyboar{
			width: 100%;
			margin: 0;
			
		}
		.fnishBtn{
			margin-top: 10rpx;
			height: calc(100% - 120rpx);
			line-height: 1;
			vertical-align: middle;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			white-space: nowrap;
			box-sizing: border-box;
			background-color: #80D7A8;
			color: #fff;
			font-size: 36rpx;
			&.dep{
				background-color: #56BF7A;
			}
			&.hover {
				// opacity: 0.8;
				background-color: #9BD6B6;
			}
		}
	}
	.keyboar{
		// width: 30%;
		// width: 168rpx;
		flex-grow: 1;
		// padding: 3%;
		height: 100rpx;
		line-height: 101rpx;
		font-size: 40rpx;
		border-radius: 4rpx;
		margin-left: 14rpx;
		margin-bottom: 10rpx;
		border: none;
		cursor: pointer;
		-webkit-overflow-scrolling: touch;
		&:nth-child(3n-2) {
			margin-left: 0;
		}
	}
	.cfm_keyBx{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.zrbox{
		width: 100%;
		.keyboar{
			// width: 32%;
			flex-grow:initial;
			// margin-left: 0;
		}
		.zrNum{
			flex: 1;
		}
	}
}
// --->
// .medBox{
// 	background: #fff;
// 	.fsitem{
// 		width: 96rpx;
// 		height: 60rpx;
// 		line-height: 61rpx;
// 		border-radius:8rpx;
// 		margin: 14rpx 20rpx 0 0;
// 		border: 1px solid #F3F3FF;
// 		&:nth-child(5n){
// 			margin: 14rpx 0 0 0;
// 		}
// 		&.act{
// 			color: #fff;
// 			background: #8DD0B2;
// 			box-shadow: 0px 3rpx 10rpx rgba(76, 162, 123, 0.2);
// 			border: 1px solid #8DD0B2;
// 		}
// 	}
// 	.lh61{
// 		line-height: 61rpx;
// 	}	
// 	.tit{
// 		min-width: 140rpx;
// 	}
// }
.text-cnblue{
	color: #0B2145;
}
.ktit{
	background: #F9FBFD;
	border: 1px solid #F3F3FF;
	border-radius: 8rpx;
	height: 72rpx;
}
// --->
.bodMove {
	transition: transform 0.2s ease-out;
	// transform: scale(1)!important;
	// opacity: 0;
}
.keyboardBox {
	background-color: #ffffff;
	width: 100%;
}
.bottomMove {
	bottom: 0;
	left: 0;
	transform: translateY(100%);
}

.moveShow {
	transform: translateY(0);
	box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.25);
	opacity: 1;
	transition: transform 0.2s ease-out;
	&.med{
		padding: 0;
	}
}

.KeyboarBody {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

.KeyboarBx {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	// background-color: rgba(3, 3, 3, 0.1);
	padding: 10rpx 0rpx 0rpx 0rpx;
	// margin-left: -12rpx;
}

.keyboar {
	width: 30%;
	flex-grow: 1;
	// padding: 3%;
	height: 80rpx;
	line-height: 81rpx;
	font-size: 40rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-left: 12rpx;
	margin-bottom: 10rpx;
	border: 1px solid rgba(203, 206, 213, 0.5);
	
	&:nth-child(3n-2) {
		margin-left: 0;
	}
}
.topKeyboarBx{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	padding: 10rpx 0rpx 0rpx 0rpx;
	box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
	.keyboar{
		// width: 25%;
		// flex-grow: initial;
		// height: 100rpx;
		// line-height: 101rpx;
		// font-size: 40rpx;
		// border-radius: 4rpx;
		// margin-left: 12rpx;
		// margin-bottom: 10rpx;
		// border: none;
		&:nth-child(3n-2) {
			margin-left: 12rpx;
		}
		&:nth-child(4n-3) {
			margin-left: 0;
		}
		// &.topkey{
		// 	width: 25%!important;
		// }
	}
	
}
.dian {
	margin-top: -10rpx;
}

.keyboarBtn {
	background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
	color: #fff;
}

.hover {
	background: #ebedf0;
}

.bot {
	bottom: 0;
}

.empty {
	background-color: #eeeeee;
}

.dowmImgBx {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border-top: 1rpx solid A1A1A1;
}

.dowmImg {
	width: 35rpx;
	height: 35rpx;
	margin-bottom: 10rpx;
	background: url('');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}

.keyboarDel {
	width: 50rpx;
	height: 36rpx;
	margin-bottom: 10rpx;
	background-image: url('');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	margin-top: 11rpx;
}

.frish {
	color: #0000e6;
	font-size: 30rpx;
	margin-bottom: 10rpx;
	position: absolute;
	right: 0rpx;
	padding: 0 30rpx;
}

.keyboarflex {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
